<template>
  <contentModel title="详情" @close="closed">
    <div :class="screenClass">
      <table-container
        v-model:columns="columns"
        v-model:is-fullscreen="isFullscreen"
        :loading="isLoading"
        :all-columns="allColumns"
        @refresh="getData"
      >
        <a-table :columns="columns" :data="renderData" :loading="isLoading" />
      </table-container>
    </div>
  </contentModel>
</template>

<script setup lang="ts">
  import { ref, defineProps, onMounted, defineEmits, reactive } from 'vue';
  import tableContainer from '@/common/components/table-container/index.vue';
  import contentModel from '@/common/components/content-model/index.vue';
  import useFullScreen from '@/common/hooks/fullScreen';
  import { sleep } from '@/utils/tools';
  import lodash from 'lodash';
  import { tableRenderConfig } from '@/views/purchase-demand/components/tableComp/baseTableConfig';
  import { baseRenderKeys } from './baseData';

  const emit = defineEmits(['closeDrawer']);
  const props = defineProps({
    rowData: {
      type: Object,
      default: null,
    },
    type: {
      type: String,
      default: '',
    },
  });
  const { isFullscreen, screenClass } = useFullScreen();
  const columns = ref<any[]>([]);
  const allColumns = ref<any[]>([]);
  const tableRenderKeys = ref<any[]>([]);
  const isLoading = ref(true);
  const renderData = ref<any[]>([]);
  const getData = async () => {
    renderData.value = [];
    isLoading.value = true;
    await sleep(2000);
    const data = reactive([
      {
        key: '1',
        name: 'Jane Doe',
        salary: 23000,
        address: '32 Park Road, London',
        email: 'jane.doe@example.com',
      },
      {
        key: '2',
        name: 'Alisa Ross',
        salary: 25000,
        address: '35 Park Road, London',
        email: 'alisa.ross@example.com',
      },
      {
        key: '3',
        name: 'Kevin Sandra',
        salary: 22000,
        address: '31 Park Road, London',
        email: 'kevin.sandra@example.com',
      },
    ]);
    renderData.value = data;
    isLoading.value = false;
  };
  interface Tst {
    [index: string]: any;
  }
  const dataRenderBase = ref<Tst>({
    '12': baseRenderKeys.standardPart.ccTableRenderKeys,
    '22': baseRenderKeys.finishedProduct.ccTableRenderKeys,
    '32': baseRenderKeys.rawMaterial.ccTableRenderKeys,
    '42': baseRenderKeys.zeroCom.ccTableRenderKeys,
    '52': baseRenderKeys.forgingAndCasting.ccTableRenderKeys,
  });
  const allConfig = ref<Tst>({ ...tableRenderConfig });
  // 初期话
  const initData = () => {
    tableRenderKeys.value = [...dataRenderBase.value[props.type]];
    if (tableRenderKeys.value.length > 0) {
      columns.value = tableRenderKeys.value.map((item: string) => {
        return allConfig.value[item];
      });
    }
    allColumns.value = lodash.cloneDeep(columns.value);
    getData();
  };
  onMounted(() => {
    initData();
    console.log('', props);
  });
  // 取消
  const closed = () => {
    emit('closeDrawer');
  };
</script>
